<template>
    <div>
        <div class="container">
            <el-main>
				<el-form ref="barberFormRef" :rules="barberFormRules" :model="barberForm" :label-width="formLabelWidth">
					<el-form-item label="工作照">
						<el-input v-model="barberForm.headPortrait" placeholder="工作照" v-if=false />
						<el-avatar v-if="masterImageUrl" class="avatar" shape="square" :src="masterImageUrl" />
                        <VAvatarUpload v-else v-bind:selectValue="VAvatar" @avatar="func_loadVAvatarData" />
					</el-form-item>
					<el-form-item label="名称" prop="name">
						<el-input v-model="barberForm.name" placeholder="名称" clearable size="medium" style="width:350px"/>
					</el-form-item>
					<el-form-item label="拼音" prop="spellName">
						<el-input v-model="barberForm.spellName" placeholder="拼音" clearable size="medium" style="width:350px"/>
					</el-form-item>
					<el-form-item label="等级" prop="grade">
						<el-input v-model="barberForm.grade" placeholder="等级" v-if=false />
						<el-select v-model="barberForm.grade" placeholder="请选择" style="width:350px">
							<el-option label="请选择" value=""></el-option>
							<el-option v-for="(item,index) in grade_Opts" :key="item.value" :label="item.label" :value="item.label" ></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="手机号码">
						<el-input v-model="barberForm.phone" placeholder="手机号码" maxlength="11" clearable size="medium" style="width:350px"/>
					</el-form-item>
					<el-form-item label="手艺值">
						{{barberForm.craftValue}}
					</el-form-item>
					<el-form-item label="工作年限">
						<el-input v-model="barberForm.workYear" placeholder="工作年限" v-if=false />
						<el-select v-model="barberForm.workYear" placeholder="请选择" style="width:350px">
							<el-option label="请选择" value=""></el-option>
							<el-option v-for="(item,index) in workYear_Opts" :key="item.value" :label="item.label" :value="item.value" ></el-option>
						</el-select>
					</el-form-item>
				</el-form>
            </el-main>
			<el-footer>
				<el-button type="primary" @click="func_onSubmit" plain>保存数据</el-button>
				<el-button type="success" @click="func_onReset" plain>重置表单</el-button>
				<el-button @click="func_closeDialog" plain>取 消</el-button>
			</el-footer>
        </div>
    </div>
</template>

<script>
import { onMounted, ref, reactive, toRefs, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { findBarberInfoById, addBarber, saveBarber, } from "../../../../api/hairmanager/barber";
import { SUCCESS_ADDDATA_DIALOG_MESSAGE, SUCCESS_EDITDATA_DIALOG_MESSAGE, formLabelWidth, } from "../../../../api/CommonErrorMessage.js";
import VAvatarUpload from '../../../../components/AvatarUpload.vue';

export default {
    name: "barberForm",
	components: {VAvatarUpload,},
	props:{
		selectValue: Object
	},
	emits: ["barberData"],
    setup(props, cex){
		onMounted(() => {
		});
        const router = useRouter();
		const route = useRoute();
        const formLabelWidth = ref("170px");
		let loadFlg = false
		/**
         * @name 定义业务表单
         */
        const getInitFormData = () => {
			return {
				id: 0,
				headPortrait: "",
				name: "",
				spellName: "",
				grade: "",
				phone: "",
				craftValue: 0,
				workYear: 0,
				memberId: 0,
			}
        };
		const grade_Opts = ref([
            { label: "U1", value: 1},
            { label: "U2", value: 2},
            { label: "U3", value: 3},
            { label: "U4", value: 4},
            { label: "U5", value: 5},
        ]);
        const workYear_Opts = ref([
            { label: "1", value: 1},
            { label: "2", value: 2},
            { label: "3", value: 3},
            { label: "4", value: 4},
            { label: "5", value: 5},
        ]);
		const memberGradeUpWayOpt = ref([]);
        /**
         * @name 表单初始化
         */
        const resetBarberForm = () => {
            Object.assign(barberForm, getInitFormData());
        };
		const barberForm = reactive(getInitFormData());
		const barberFormRef = ref(null);
        const barberFormRules = {
            name: [
                { required: true, message: "请输入服务员名称", trigger: "blur" },
            ],
            spellName: [
                { required: true, message: "请输入服务员拼音名称", trigger: "blur" },
            ],
			grade: [
                { required: true, message: "请选择服务员等级", trigger: "blur" },
            ],
        };
		// =========================================================================================
		// 主业务处理 ========================================================================================= START
        // 提交
        const func_onSubmit = () => {
            // 表单校验
            barberFormRef.value.validate((valid) => {
                if (valid) {
					if(loadFlg){
						addBarber(barberForm).then((res) => {
							if(res.code != 200) {
								if(res.type == 0) {
									ElMessage.warning(res.data.msg);
								} else {
									ElMessage.error(res.data.msg);
								}
							} else {
								resetBarberForm();
								ElMessage.success(SUCCESS_ADDDATA_DIALOG_MESSAGE);
								cex.emit('barberData', {state: 1, data: []});
							}
						});
					} else {
						saveBarber(barberForm).then((res) => {
							if(res.code != 200) {
								if(res.type == 0) {
									ElMessage.warning(res.data.msg);
								} else {
									ElMessage.error(res.data.msg);
								}
							} else {
								resetBarberForm();
								ElMessage.success(SUCCESS_EDITDATA_DIALOG_MESSAGE);
								cex.emit('barberData', {state: 1, data: []});
							}
						});
					}
                } else {
                    return false;
                }
            });
        };
        // 重置
        const func_onReset = () => {
			resetBarberForm();
        };
		const func_closeDialog = () => {
            cex.emit('barberData', {state: 1, data: []});
        };
        // 页面初始化
        const func_onload = (v) => {
			if(loadFlg){
				findBarberInfoById(v).then((res)=>{
                if(res.code != 200) {
                    if(res.type == 0) {
                        ElMessage.warning(res.data.msg);
                    } else {
                        ElMessage.error(res.data.msg);
                    }
                } else {
					Object.keys(res.data).forEach((item) => {
                        barberForm[item] = res.data[item];
                    });
					masterImageUrl.value = barberForm['headPortrait'];
                }
				});
			} else {
				resetBarberForm();
			}
        }
		// 主业务处理 ========================================================================================= END
		// 主图上传 ========================================================================================= START
        let masterImageUrl = ref('');
        const VAvatar = reactive({});
        const func_loadVAvatarData = (v) => {
            if(v['state'] === 1) {
                masterImageUrl.vlaue = v['imgUrl'];
                memberForm['urlPic'] = v['imgUrl'];
            }
        };
        // 主图上传 ========================================================================================= END
        watch(() => props.selectValue, (val) => {
            let id = val['id'];
            loadFlg = val['load'];
			func_onload(id);
        }, {deep: true,immediate: true});
        return {
			// 系统变量 =========================================================================================
			formLabelWidth, barberForm, barberFormRef, barberFormRules, grade_Opts, workYear_Opts,
			// 主业务调用方法 =========================================================================================
			func_onload, getInitFormData, resetBarberForm, func_onSubmit, func_onReset, func_closeDialog,
			// 图片文件处理 =========================================================================================
            masterImageUrl, VAvatar, func_loadVAvatarData,
        };
    },
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 300px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.avatar {
	width: 300px;
	height: 300px;
	display: block;
	align: center;
}

</style>